<template>
	<view>
		
		<!-- tab -->
		<u-tabs :list="list" :is-scroll="false" 
		:bar-height="6" :bar-width="380"
		:current="current" @change="change"></u-tabs>
		
		<!-- table -->
		<u-table :borderColor="'none'" class="product-list">
			<u-tr class="u-tr">
				<u-th class="u-th">名称</u-th>
				<u-th class="u-th">最新价</u-th>
				<u-th class="u-th">涨跌幅</u-th>
			</u-tr>
			<u-tr class="u-tr product-list-item" :key="item" v-for="item in 10">
				<u-td class="u-td product-title"> BTC/USDT </u-td>
				<u-td class="u-td"> 11501.09 </u-td>
				<u-td class="u-td">
					<block v-if="item%2">
						<u-button type="error" size="mini">-0.63%  </u-button>
					</block>
					<block v-else>
						<u-button type="warning" size="mini">+0.63% </u-button>
					</block>
					
				</u-td>
			</u-tr>
		</u-table>	
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '持仓'
				}, {
					name: '历史'
				}],
				current: 0
			}
		},
		methods: {
			change(index) {
				this.current = index;
			}
		}
	}
</script>

<style lang="scss" scoped>
.u-tabs{
	border-bottom: 1px solid #DBF1E1;
}

.product-list{
	.product-title{
		font-weight: bold;
		color: $u-content-color;	
	}
	.product-list-item{
		margin: 10upx 0;
		border-bottom: 1upx solid #DBF1E1;
	}
	.product-list-item:last-child{
		border-bottom:none;
	}
}
</style>
